<template>
  <div class="app-container">
    <el-form
      :inline="true"
      v-loading="loading"
      class="form-container"
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="说说内容" prop="talkContent">
            <el-input
              style="width: 1000px"
              type="textarea"
              :rows="6"
              v-model="form.talkContent"
              clearable
              placeholder="请输入说说内容"
            />
            <el-popover
              placement="top-start"
              width="400"
              trigger="click"
              class="emoBox"
            >
              <div class="emotionList">
                <a
                  href="javascript:void(0);"
                  @click="getEmo(index)"
                  v-for="(item, index) in emojiList"
                  :key="index"
                  class="emotionItem"
                  >{{ item }}</a
                >
              </div>
              <i slot="reference" style="cursor: pointer">
                <el-tooltip content="选择表情" effect="dark" placement="bottom">
                  <svg-icon
                    style="width: 30px; height: 30px"
                    icon-class="smile"
                  />
                </el-tooltip>
              </i>
            </el-popover>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="说说状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio-button
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.value"
                >{{ dict.label }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否置顶" prop="isTop">
            <el-radio-group v-model="form.isTop">
              <el-radio-button
                v-for="dict in dict.type.blog_is_top"
                :key="dict.value"
                :label="dict.value"
                >{{ dict.label }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="说说图片" prop="talkImage">
            <image-upload :limit="9" :file-size="5" v-model="form.talkImage" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="form-footer">
      <el-button type="primary" :loading="buttonLoading" @click="submitForm"
        >确 定</el-button
      >
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getTalk, addTalk, updateTalk } from "@/api/blog/talk";
const appData = require("@/assets/emoji/emoji-compact.json");
import store from "@/store";
import router from "@/router";
import MiddleUtil from '@/utils/middleUtil'
export default {
  name: "TalkOperate",
  dicts: ["sys_normal_disable", "blog_is_top"],
  data() {
    return {
      //表情列表
      emojiList: [],
      buttonLoading: false,
      // 遮罩层
      loading: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        talkContent: [
          { required: true, message: "说说内容不能为空", trigger: "change" },
        ],
        isTop: [
          { required: true, message: "是否置顶不能为空", trigger: "blur" },
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    for (let i in appData) {
      this.emojiList.push(appData[i]);
    }
  },
  created() {
    this.reset();
    this.form.talkId = this.$route.params && this.$route.params.talkId;
    if (this.form.talkId != undefined) {
      this.loading = true;
      getTalk(this.form.talkId).then((res) => {
        this.form = res.data;
        this.loading = false;
      });
    }
  },
  methods: {
    getEmo(index) {
      const text = this.emojiList[index];
      const textarea = document.querySelector(".el-textarea__inner");
      if (textarea) {
        textarea.focus();
        if (document.selection) {
          //IE
          const sel = document.selection.createRange();
          sel.text = text;
        } else if (
          typeof textarea.selectionStart === "number" &&
          typeof textarea.selectionEnd === "number"
        ) {
          //非IE
          const startPos = textarea.selectionStart;
          const endPos = textarea.selectionEnd;
          const cursorPos = startPos + text.length;
          textarea.value =
            textarea.value.substring(0, startPos) +
            text +
            textarea.value.substring(endPos, textarea.value.length);
          textarea.selectionStart = textarea.selectionEnd = cursorPos;
          this.form.talkContent = textarea.value;
        } else {
          textarea.value += text;
          this.form.talkContent = textarea.value;
        }
      }
    },
    // 取消按钮
    cancel() {
      this.backAndResetForm();
    },
    //返回并重置表单
    backAndResetForm() {
      this.reset();
      MiddleUtil.$emit('getList');
      store.dispatch("tagsView/delView", router.currentRoute);
      this.$router.replace("/blog/talk");
    },
    // 表单重置
    reset() {
      this.form = {
        talkId: undefined,
        talkContent: undefined,
        talkImage: undefined,
        isTop: "0",
        status: "0",
      };
      this.resetForm("form");
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.talkId != null) {
            updateTalk(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.backAndResetForm();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addTalk(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.backAndResetForm();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>
<style scoped>
.app-container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form-container {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 30px;
  height: calc(100vh - 120px);
}


.emotionList {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}
.emotionItem {
  width: 10%;
  font-size: 20px;
  text-align: center;
}
/*包含以下四种的链接*/
.emotionItem {
  text-decoration: none;
}
/*正常的未被访问过的链接*/
.emotionItem:link {
  text-decoration: none;
}
/*已经访问过的链接*/
.emotionItem:visited {
  text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.emotionItem:hover {
  text-decoration: none;
}
/* 正在点击的链接*/
.emotionItem:active {
  text-decoration: none;
}
</style>
<style lang="scss">
/* el-popover是和app同级的，所以scoped的局部属性设置了无效 */
/* 需要设置全局style */
.el-popover {
  height: 200px;
  width: 400px;
  overflow: scroll;
  overflow-x: auto;
}
</style>
